<template>
	<div>
		<div class="topTitle">用户笔记管理</div>
		<el-form :model="query" inline label-width="80px">
			<el-form-item label="用户昵称">
				<el-input v-model="query.userName" placeholder="请输入用户昵称" class="width300 margin-right10"></el-input>
			</el-form-item>
			<el-form-item label="笔记标题">
				<el-input v-model="query.content" placeholder="请输入笔记标题" class="width300 margin-right10"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" class="margin-left10" @click="handleSearch">搜索</el-button>
				<el-button type="default" icon="el-icon-refresh-right" @click="handleRefresh">重置</el-button>
				<el-button type="primary" icon="el-icon-delete" @click="delAllSelection">批量删除</el-button>
			</el-form-item>
		</el-form>
		<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header-style"
			@selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55" align="center"></el-table-column>
			<el-table-column label="用户头像/昵称">
				<template slot-scope="scope">
					<div class="row-me row-center">
						<el-image :src="scope.row.userIcon" class="width40 height40 margin-right10 radius50Per"
							:preview-src-list="[scope.row.userIcon]">
						</el-image>
						<span>{{scope.row.userName}}</span>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="content" label="笔记内容"></el-table-column>
			<el-table-column label="上传图片">
				<template slot-scope="scope">
					<span v-if="scope.row.images">
						<el-image v-for="(item,index) in scope.row.images.split(',')" :key="index" :src="item" alt=""
							class="height50 width50 margin-right10" :preview-src-list="scope.row.images.split(',')">
						</el-image>
					</span>
				</template>
			</el-table-column>
			<el-table-column prop="createTime" label="添加时间" align="center"></el-table-column>
			<el-table-column label="操作" width="80px" align="center">
				<template slot-scope="scope">
					<el-button type="text" @click="clickDetail(scope.row)">详情</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="margin-top10">
			<el-pagination background layout="->,total,sizes, prev, pager, next" :page-sizes="[20, 30, 40, 50]"
				@size-change="handleSizeChange" :current-page="query.pageNumber" :total="pageTotal"
				@current-change="handlePageChange"></el-pagination>
		</div>
		<!-- 详情 -->
		<el-dialog title="笔记详情" :visible.sync="detailVisible" width="60%">
			<div class="padding-left20 padding-right20 font-size16">
				<div class="font-bold">题目信息</div>
				<p>题干：<span v-html="noteDetail.target.title"></span></p>
				<div class="row-me">
					<p>选项：</p>
					<div>
						<div class="margin-top10" v-for="(item,index) in noteDetail.target.content" :key="index">
							{{item.title||''}}.{{item.content||''}}
						</div>
					</div>
				</div>
				<p>参考答案：<span>{{noteDetail.target.answer}}</span></p>
			</div>
			<div class="margin-top30 padding-left20 padding-right20 font-size16">
				<div class="font-bold">笔记信息</div>
				<p>笔记内容：<span>{{noteDetail.content}}</span></p>
				<p class="row-me row-center">图片内容：<template v-if="noteDetail.images">
						<img v-for="(item,index) in noteDetail.images.split(',')" :src="item" alt=""
							class="width50 height50 margin-right10">
					</template></p>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="detailVisible=false">关 闭</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		name: 'basetable',
		data() {
			return {
				query: {
					type: 2,
					pageNumber: 1,
					pageSize: 30
				},
				tableData: [],
				pageTotal: 0,
				multipleSelection: [],
				batchOperation: '',
				detailVisible: false,
				noteDetail: {
					target: {
						content: []
					}
				},
				delList: [],
			};
		},
		created() {
			this.getData();
		},
		methods: {
			clickDetail(row) {
				this.noteDetail = row || {}
				if (this.noteDetail.target) {
					this.noteDetail.target.content = JSON.parse(this.noteDetail.target.content) || []
				}
				this.detailVisible = true
			},
			handleSizeChange(val) {
				this.$set(this.query, 'pageSize', val);
				this.getData();
			},
			async getData() {
				const res = await this.$get('/admin/user/pageComment', this.query)
				if (res.code == 1000) {
					this.tableData = res.data.list;
					this.pageTotal = res.data.totalRow;
				}
			},
			// 触发搜索按钮
			handleSearch() {
				this.$set(this.query, 'pageNumber', 1);
				this.getData();
			},
			handleRefresh() {
				this.query = {
					userName: '',
					title: '',
					pageNumber: 1,
					pageSize: 20
				}
				this.handleSearch()
			},
			// 多选操作
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			delAllSelection() {
				this.$confirm('确定要批量删除已选中的题目吗？', '提示', {
					type: 'warning'
				}).then(() => {
					if (this.multipleSelection.length == 0) return
					let ids = Array.from(this.multipleSelection, ({
						id
					}) => id)
					this.$get('/admin/user/deleteComments', {
						ids: ids.toString(),
						type: 2
					}).then(res => {
						if (res.code == 1000) {
							this.$message.success('批量删除成功')
							this.getData()
							this.multipleSelection = []
						}
					})
				}).catch(() => {});
			},
			// 分页导航
			handlePageChange(val) {
				this.$set(this.query, 'pageNumber', val);
				this.getData();
			}
		}
	};
</script>

<style scoped>
	.handle-box {
		margin-bottom: 20px;
	}


	.table {
		width: 100%;
		font-size: 16px;
	}


	.mr10 {
		margin-right: 10px;
	}

	.table-td-thumb {
		display: block;
		margin: auto;
		width: 40px;
		height: 40px;
	}
</style>